<template>
    <div style="background:gray;width: 100%;max-height:500px;overflow: auto;padding:30px;margin;0px;font-size:10px;margin-bottom:50px;" >
      <el-row style="height:55%">
        <el-col :span="24" style="border:0px">
          <div class="grid-content"  >
            <div style="text-align:center;margin:auto;font-size:30px">右主机推进系统</div>
          </div>
        </el-col></el-row>
      <el-row style="height:50%;">
          <el-col :span="5">
              <div style="padding:5px;text-align:center;align-items:center;align-content:center;justify-content: center; margin-bottom:20px " >
                <div style="margin-bottom:10px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                  <div style="width:120px;line-height:15px;height:15px;border: 1px solid black;">左主机转速</div>
                </div>
                 <div style=";text-align:center;align-items:center;border-style:double;border-width:5px;width:150px;height:180px;border-color:black;text-wrap:wrap;margin:auto;">
                      <div style="margin-top:20px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                        <div style="margin-top:10px;width:120px;height:80px;border:1px solid black;"></div>
                      </div>
                      <div style="margin-bottom:10px;margin-top:10px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                        <div > 单位： r/min</div>
                      </div>
                 </div>
              </div>
          </el-col>
          <el-col :span="5" style="text-align:center;align-items:center;align-content:center;justify-content: center;  " >
            <img :src="img" style="width:220px;height: 180px;margin-top:20px" />
          </el-col>
          <el-col :span="9" style="text-align:center;align-items:center;align-content:center;justify-content: center;  height:200px;margin-top:20px;">
            <e-charts  :option="option"></e-charts>
            </el-col>
          <el-col :span="5">
            <div style="padding:5px;text-align:center;align-items:center;align-content:center;justify-content: center; margin-bottom:20px " >
                <div style="margin-bottom:10px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                  <div style="width:120px;line-height:15px;height:15px;border: 1px solid black;">左主机涡轮增压器转速</div>
                </div>
                 <div style=";text-align:center;align-items:center;border-style:double;border-width:5px;width:150px;height:180px;border-color:black;text-wrap:wrap;margin:auto;">
                      <div style="margin-top:20px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                        <div style="margin-top:10px;width:120px;height:80px;border:1px solid black;"></div>
                      </div>
                      <div style="margin-bottom:10px;margin-top:10px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                        <div > 单位： r/min</div>
                      </div>
                 </div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom:20px">
          <el-col :span="6" >
                <div  v-for="num in 28" :key="num">
                  <div style="display:flex;margin-left:10px;margin-top:10px;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                      <div  style="" >XXXXSXXXXXXXX</div>
                      <div  style="margin-left:10px;width:60px;height:20px;border:1px solid" ></div>
                      <div style="margin-left:10px;"> r/min</div>
                  </div>
              </div>
          </el-col>
          <el-col :span="18" style="display:grid; grid-template-columns: repeat(3, 1fr);gap: 10px 10px;" >
            <div  v-for="num in 38" :key="num" style="width:100%">
              <div style="display:flex;margin-top:2px;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center;">
                  <div class="circle"></div>
                  <div  style="margin-left:10px" >XXXXSXXXXXXXX</div>
              </div>
            </div>
          </el-col>
        </el-row>
    </div>
  
</template>
<script>
import deviceImg from '@/assets/images/device.jpeg'
// import datas from '@/utils/test.json';
import { histogramData } from "@/api/system/chartConfig";
export default {
name:"test",
created(){
  console.log("hhh",this.bar.data)
  // this.datas;
    this.getData();
  // this.bar.timer=  setInterval(() =>{
  //     this.getData();
  //   },this.bar.time*1000);
},
beforeDestroy() {
  clearInterval(this.bar.timer);
},
methods:{
  async   getData(){
    console.log(111)
    // await  histogramData({deviceGraphicalId:this.currentId}).then( async (response) =>
      // {
      // this.bar.data =  await response.data;
      console.log(this.bar.data.data.data)
      let dataList  = this.bar.data.data.data
      this.bar.xDatas=   dataList.map(item=> {return item.deviceName});
      console.log(this.bar.xDatas)
      this.bar.serials=   [{
              type:'bar',
              barWidth:'20',
              data: dataList.map(item=> {return item.value})
          }]
      console.log(this.bar.serials)
  
    // })
    }
},
computed:{
    option(){
        return{
           grid:{height:"65%",bottom:45},
            backgroundColor:"gray",
            title:{
                text:this.name,
                left:"center",
                textStyle: {
                fontSize: 30
                }
            },
            legend: {bottom:"-5px"},
            tooltip: {
                trigger: 'none',
                axisPointer: {
                type: 'cross'
                }
            },
            color:['#006FFF'],
            xAxis: [{
                name:"设备", //
                nameTextStyle:{
                  color:"black"
                },
                type: 'category',
                width:1,
                axisLabel: {
                  color: 'black',// x轴字体颜色
                  formatter: val => {
                    let result= ''
                  const textLength = val.length
                    const limitNumber = 4 // 一行显示几个字
                    if (textLength > limitNumber) {
                      for (var i = 0; i < textLength; i += limitNumber) {
                        result += val.substring(i, i + limitNumber) + '\n'
                      }
                      result = result.trim() // 移除最后一个换行符
                    } else {
                      result = val
                    }
                    return result
                  }
                },
                axisTick: {      // 坐标轴的刻度
                  show: true,    // 是否显示
                  inside: true,  // 是否朝内
                  length: 3,      // 长度
                  lineStyle: {
                    // color: 'red',  // 默认取轴线的颜色
                    width: 1,
                    type: 'solid'
                  }
                },
                axisLine: {
                  symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                  symbolSize: [8, 8], // 箭头大小
                  symbolOffset: [0, 7],  // 箭头位置
                  inside: true,  // 是否朝内
                    onZero: false,
                    lineStyle: {
                    color: 'blue',
                    width: 1,
                    type: 'solid'
                  }
                },
                data:this.bar.xDatas// x轴
            }],
            yAxis: {
              // interval:20,
                name:this.bar.unit,
                type: 'value',//y轴
                axisLine: {    // 坐标轴 轴线
                    show: true,  // 是否显示
                    //  -----   箭头 -----
                    symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                    symbolSize: [8, 8],  // 箭头大小
                    symbolOffset: [0, 7], // 箭头位置
              
                    // ----- 线 -------
                    lineStyle: {
                      color: 'blue',
                      width: 1,
                      type: 'solid'
                    }
                },
                axisLabel: {      // 坐标轴的标签
                  show: true,    // 是否显示
                  inside: false,  // 是否朝内
                  rotate: 0,     // 旋转角度
                  margin: 18,     // 刻度标签与轴线之间的距离
                  color: 'red',  // 默认轴线的颜色
                },
                axisTick: {      // 坐标轴的刻度
                  show: true,    // 是否显示
                  inside: true,  // 是否朝内
                  length: 6,      // 长度
                  lineStyle: {
                    // color: 'red',  // 默认取轴线的颜色
                    width: 1,
                    type: 'solid'
                  }
                },
                splitLine: {    // gird 区域中的分割线
                show: true,   // 是否显示
                lineStyle: {
                  color: '#666',
                  width: 1,
                  type: 'dashed'
                }
              },
              splitArea: {     // 网格区域
                show: false   // 是否显示，默认为false
              }

            },
            series:this.bar.serials
        }
    }
},
data() {
    return{
      img:deviceImg,
      animalv:"diagonal-line",
      animalv1:"diagonal-line1",
      currentId: this.$route.query.currentId?this.$route.query.currentId:43,
      name:this.$route.query.name,
      bar:{
        timer:null,
        time:this.$route.query.time,
        // data: datas,
        serials:[],
        xDatas:[],
        unit:this.$route.query.unit==1?'Kpa':'°C'
      }
    }
}
}
</script>
<style scoped >
.el-row {

&:last-child {
  margin-bottom: 0;
}
}

.el-col {
height: 100%;
/* border:1px solid; */
border-radius: 0px;
}
.circle{
border: 2px solid black;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
/* background-color: white; */

font-size: 10px;
}
.bg-purple-dark {
/* background: #99a9bf; */
}
.bg-purple {
/* background: #d3dce6; */
}
.line {
  border-right: 2px solid #010101;
  display: inline-block;
  /* margin-bottom: -12px; */
}

.bg-purple-light {
/* background: #e5e9f2; */
}
.grid-content {
text-wrap:wrap;
font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
}
.diagonal-line {
animation: rotate 1s linear infinite ;
animation-fill-mode:forwards;
animation-iteration-count: 1;
transform-origin: 0 0;
}

@keyframes rotate{
from{
transform: rotate(-40deg);
}
to{
transform: rotate(0deg);
}
}
.diagonal-line1 {
animation: rotate1 0.1s linear infinite ;
animation-fill-mode:forwards;
animation-iteration-count: 1;
transform-origin: 0 0;
}

@keyframes rotate1{
from{
transform: rotate(-0deg);
}
to{
transform: rotate(-40deg);
}
}
.item {
flex: 0 0 auto;
margin: 10px;
}
.row-bg {
padding: 10px 0;
/* background-color: #f9fafc; */
}

</style>
